<script setup lang="ts">
import { ref, h, toRaw, toRefs, reactive,computed } from "vue";
import {
  EditOutlined,
  DeleteOutlined,
  AlignLeftOutlined,
  SettingOutlined,
  RedoOutlined,
} from "@ant-design/icons-vue";
import Drawer from "./components/Drawer.vue";
import { getAdvertisementListApi, deleteAdvertisementApi } from "@/api/main";
const dataSource = ref([]);
import { formatDictionaryItem, formatDate } from "@/utils/common";
import moment from "moment";
import emitter from "@/utils/mitt";
import { message } from "ant-design-vue";
const columns = ref([
  {
    title: "广告",
    dataIndex: "url",
    key: "url",
    width: 80,
    checked:true,
    isParticipates:true
  },
  {
    title: "排序",
    dataIndex: "sort",
    key: "sort",
    align: "center",
    width: 80,
    checked:true,
    isParticipates:true
  },
  {
    title: "广告标题",
    dataIndex: "title",
    key: "title",
    checked:true,
    isParticipates:false
  },
  {
    title: "广告类型",
    dataIndex: "type",
    key: "type",
    align: "center",
    checked:true,
    isParticipates:true
  },
  {
    title: "广告位置",
    dataIndex: "position",
    key: "position",
    align: "center",
    checked:true,
    isParticipates:true
  },
  {
    title: "广告状态",
    dataIndex: "status",
    key: "status",
    align: "center",
    checked:true,
    isParticipates:true
  },
  {
    title: "外链",
    dataIndex: "link",
    key: "link",
    align: "center",
    checked:true,
    isParticipates:true
  },
  {
    title: "点击量",
    dataIndex: "click",
    key: "click",
    align: "center",
    checked:true,
    isParticipates:true
  },
  {
    title: "背景颜色",
    dataIndex: "bg_color",
    key: "bg_color",
    align: "center",
    checked:true,
    isParticipates:true
  },
  {
    title: "描述",
    dataIndex: "description",
    key: "description",
    align: "center",
    checked:true,
    isParticipates:true
  },
  {
    title: "操作",
    key: "operation",
    fixed: "right",
    align: "center",
    width: 260,
    checked:true,
    isParticipates:false
  },
])
const formRef = ref();

const formState = reactive({
  title: "",
  type: "",
});
const resetForm = () => {
  formRef.value.resetFields();
  getData();
};
// 自定义列
const customizeColumns = computed(() => {
  return columns.value.filter((item) => item.checked);
});
const pagination = ref({
  current: 1,
  pageSize: 10, //每页条数
  total: 0, //	数据总数
  size: "large", //	当为「small」时，是小尺寸分页
  showSizeChanger: true, //是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
  showTotal: (total: number) => `共 ${total} 条`, //用于显示数据总量和当前数据顺序
  onChange: (page: number, pageSize: number) => {
    //页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
    pagination.value.current = page;
    pagination.value.pageSize = pageSize;
    getData();
  },
});
const getData = () => {
  getAdvertisementListApi({
    current: pagination.value.current,
    pageSize: pagination.value.pageSize,
    // ...toRaw(formState),
  }).then((response: any) => {
    dataSource.value = response.result.list;
    pagination.value.total = response.result.total;
  });
};

// 刷新
const handleRefresh = async () => {
  getAdvertisementListApi({
    current: pagination.value.current,
    pageSize: pagination.value.pageSize,
    // ...toRaw(formState),
  }).then((response: any) => {
    dataSource.value = response.result.list;
    pagination.value.total = response.result.total;
    message.success("刷新成功");
  });
};
const handleDelete = (id: number) => {
  deleteAdvertisementApi({
    id: id,
  }).then((response: any) => {
    if (response.code === 200) {
      message.success(response.message);
      getData();
    } else {
      message.error(response.message);
    }
  });
};
getData();
// 监听抽屉关闭事件
emitter.on("handleSuccess", () => {
  getData();
});

const drawerOptions = ref({
  title: "新增",
  state: 0, // 0新增 1 编辑
  options: null,
});
// 抽屉DOM 节点
const drawerRefs = ref();
// 打开抽屉
const openDrawer = (state: number, record: any) => {
  if (state === 1) {
    drawerOptions.value = {
      title: "编辑",
      state: 1,
      options: record,
    };
  }
  if (state === 0) {
    drawerOptions.value = {
      title: "新增",
      state: 0,
      options: null,
    };
  }
  if (state === 2) {
    drawerOptions.value = {
      title: "查看详情",
      state: 2,
      options: record,
    };
  }
  drawerRefs.value.open = true;
};
</script>

<template>
  <!-- <a-card>
    <a-form layout="inline" ref="formRef" :model="formState">
      <a-form-item name="title">
        <a-input placeholder="字典名称查询" v-model:value="formState.title" />
      </a-form-item>
      <a-form-item name="type">
        <a-input placeholder="字典类型查询" v-model:value="formState.type" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getData">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card> -->
  <a-card class="mt-2" :bodyStyle="{ padding: '15px' }">
    <div class="flex justify-between mb-4">
      <a-space>
        <a-button type="primary" @click="openDrawer(0)">新增</a-button>
      </a-space>
      <div class="flex items-center">
          <a-popover trigger="click" class="mr-2" placement="bottom">
          <template #content>
            <a-menu>
              <template  v-for="(item, index) in columns" :key="index">
                <a-menu-item v-if="item.isParticipates">
                <a-checkbox v-model:checked="item.checked">{{
                  item.title
                }}</a-checkbox>
              </a-menu-item>
              </template>
           
            </a-menu>
          </template>
          <a-button :icon="h(SettingOutlined)">自定义显示列</a-button>
        </a-popover>
        <a-button :icon="h(RedoOutlined)" @click="handleRefresh">刷新</a-button>
      </div>
    </div>
    <a-table
      :dataSource="dataSource"
      :columns="customizeColumns"
      bordered
      :pagination="pagination"
      :resizable="true"
      size="middle"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'icon_url'">
          <a-image :src="record.icon_url" style="width: 40px" />
        </template>
        <template v-if="column.key === 'url'">
          <a-image :src="record.url" />
        </template>
        <template v-if="column.key === 'type'">
          <a-tag color="#2db7f5">{{
            formatDictionaryItem("AD_TYPE", record.type)
          }}</a-tag>
        </template>
        <template v-if="column.key === 'position'">
          <a-tag :color="record.position == 0 ? '#2db7f5' : 'pink'">{{
            formatDictionaryItem("AD_POSITION", record.position)
          }}</a-tag>
        </template>
        <template v-if="column.key === 'status'">
          <a-tag :color="record.status == 0 ? '#2db7f5' : 'pink'">{{
            formatDictionaryItem("AD_STATUS", record.status)
          }}</a-tag>
        </template>
        <template v-if="column.key === 'operation'">
          <span>
            <a-button
              type="text"
              size="small"
              :icon="h(EditOutlined)"
              class="text-blue-600"
              @click="openDrawer(1, record)"
              >编辑</a-button
            >
            <a-divider type="vertical" />
            <a-button
              type="text"
              size="small"
              :icon="h(AlignLeftOutlined)"
              class="text-blue-600"
              @click="openDrawer(2, record)"
              >详情</a-button
            >
            <a-divider type="vertical" />
            <a-button
              type="text"
              size="small"
              danger
              :icon="h(DeleteOutlined)"
              @click="handleDelete(record.id)"
              >删除</a-button
            >
          </span>
        </template>
      </template>
    </a-table>
  </a-card>
  <Drawer ref="drawerRefs" :drawerOptions="drawerOptions" />
</template>

<style scoped></style>
